<script setup>
  import { ref } from 'vue'
  import { VueFlow } from '@vue-flow/core'

  import CustomNode from './custom-node.vue'
  import SpecialNode from './special-node.vue'
  import OwnNode from './own-edge.vue'

  const nodes = ref([
    {
      id: '1',
      data: { label: 'Node 1-2-3' },
      // this will create the node-type `custom`
      type: 'custom',
      position: { x: 50, y: 50 },
      style: { background: '#fff', border: '0px solid black' },
    },
    {
      id: '2',
      data: { label: 'Node A-B-C', isVisible: false, toolbarPosition: 'right' },
      // this will create the node-type `special`
      type: 'special',
      position: { x: 350, y: 50 },
    },
  ])

  const edges = ref([
    {
      id: 'e1-2',
      source: '1',
      target: '2',
      type: 'own',
    },
  ])
</script>

<template>
  <VueFlow :nodes="nodes"  :auto-connect="true" fit-view-on-init>
    <template #node-custom="customNodeProps">
      <CustomNode v-bind="customNodeProps" />
    </template>

    <template #edge-own="ownEdgeProps">
      <OwnNode v-bind="ownEdgeProps" />
    </template>

    <template #node-special="specialNodeProps">
      <SpecialNode v-bind="specialNodeProps" />
    </template>
  </VueFlow>
</template>
<style scoped lang="less">
  // :deep(.vue-flow__resize-control) {
  //   height: 1px;
  // }
</style>
